<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="账单"></xk-header>
		<view class="top-view">
			<picker mode="date" :value="date" fields="month" @change="dateChange">
				<view class="top-view-item">
					<!-- <view>{{date || "全部日期"}}</view> -->
					<view class="" v-if="date ==='2100-01'">
						全部日期
					</view>
					<view class="" v-else>
						{{date}}
					</view>
					<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')" />
				</view>
			</picker>
			<!-- <picker :range="contracts" :value="contractIndex" range-key="name"
				@change="(e)=>{this.contractIndex = e.detail.value}">
				<view class="top-view-item">
					<view>{{contracts[contractIndex].name}}</view>
					<image mode="aspectFill" class="xiala" src="/static/xiala.png"/>
				</view>
			</picker> -->
			<!-- <picker :range="estates" :value="estateIndex" range-key="name" @change="estatesChange">
				<view class="top-view-item">
					<view>{{estates[estateIndex].name}}</view>
					<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')" />
				</view>
			</picker> -->
			<picker :range="types" :value="typeIndex" range-key="name" @change="typeChange">
				<view class="top-view-item">
					<view>{{types[typeIndex].name}}</view>
					<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')" />
				</view>
			</picker>

			<view class="top-view-item" @click="resetSort()">
				<view>重置</view>
			</view>
		</view>

		<view class="list" v-for="(item, index) of dataList" :key="index" v-if="dataList && dataList.length > 0">
			<view v-if="estateIndex===0 || estates[estateIndex].property_code===item.property_code">
				<view class="list-item item-border">
					<view>物业编号：{{item.property_code}}</view>
				</view>
				<view class="list-item" v-if="types[typeIndex].value === '0'">
					<view class="title1">本月租金(元)</view>
					<view class="title2">{{item.month_money | formatMoney}}</view>
				</view>
				<view class="list-item item-border"
					v-if="types[typeIndex].value === '0' || types[typeIndex].value === '1'" @click="goDetail(1, item)">
					<view>本月电费(元)</view>
					<view>{{item.month_electricity_money | formatMoney}}</view>
					<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')" />
				</view>
				<view class="list-item item-border"
					v-if="types[typeIndex].value === '0' || types[typeIndex].value === '2'" @click="goDetail(2, item)">
					<view>本月水费(元)</view>
					<view>{{item.month_water_money | formatMoney}}</view>
					<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')" />
				</view>
				<view class="list-item item-border" v-if="types[typeIndex].value === '0'">
					<view>本月物业管理费(元)</view>
					<view>{{item.management_money | formatMoney}}</view>
				</view>
				<view class="list-item item-border"
					v-if="types[typeIndex].value === '0'|| types[typeIndex].value === '1'">
					<view>本月公摊电费(元)</view>
					<view>{{item.pool_electricity_money | formatMoney}}</view>
				</view>
				<view class="list-item item-border"
					v-if="types[typeIndex].value === '0'|| types[typeIndex].value === '2'">
					<view>本月公摊水费(元)</view>
					<view>{{item.pool_water_money | formatMoney}}</view>
				</view>
			</view>
		</view>

		<view class="empty-view" v-if="!dataList || dataList <= 0">
			<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
			<view>哎呀，该界面暂无内容~</view>
		</view>
	</view>
</template>
<script>
	import config from '@/common/config.js'
	import moment from 'moment'

	export default {
		data() {
			return {
				imgUrl: this.$config.BASE_imgUrl,
				date: moment().format("YYYY-MM"), // 获取当前日期
				contractIndex: 0,
				contracts: [{
					name: "HT202029342",
					value: "HT202029342"
				}, {
					name: "HT202029343",
					value: "HT202029343"
				}],
				estateIndex: 0,
				estates: [{
					name: "全部"
				}],
				typeIndex: 0,
				types: [{
					name: "全部",
					value: "0"
				}, {
					name: "电费",
					value: "1"
				}, {
					name: "水费",
					value: "2"
				}],
				dataList: []
			};
		},
		onLoad(options) {
			this.initInfo()
		},
		methods: {
			initInfo() {
				this.$api.pmServiceRepair_getMyAssetsProperty().then(res => {
					console.warn("物业列表：", res)

					for (let item of res) {
						item["name"] = item.building + "楼 " + item.storey + "层"

						this.estates.push(item)
					}
				})
				this.queryList()

			},
			queryList() {
				this.dataList.splice(0, this.dataList.length)
				let params = {}
				// if (this.date) {
				params.dateMonth = this.date
				// }

				this.$api.piPayNotice_getPiPayNoticeList(params).then(res => {
					console.warn("缴费通知列表：", res)

					for (let item of res.unDoneList) { //completeList unDoneList
						this.dataList.push(item)
					}
					console.log(this.dataList)
				})
			},
			goDetail(index, item) {
				console.log(item)
				let type = this.types[index]
				uni.navigateTo({
					url: "/pagesC/bill/detail?type=" + type.name + "&data=" + JSON.stringify(item)
				})
			},
			resetSort() {
				let isReload = false
				if (this.estateIndex != 0) {
					this.estateIndex = 0
					isReload = true
				}
				if (this.date) {
					this.date = "2100-01"
					isReload = true
				}
				this.estateIndex = 0
				this.typeIndex = 0

				if (isReload) {
					this.queryList()
				}
			},
			dateChange(e) {
				if (this.date !== e.detail.value) {
					this.date = e.detail.value
					this.queryList()
				}
			},
			typeChange(e) {
				this.typeIndex = e.detail.value
			},
			estatesChange(e) {
				console.log(e);
				console.log(this.estates);
				console.log('dataList',this.dataList);
				if (this.estateIndex != e.detail.value) {
					this.estateIndex = parseInt(e.detail.value)
				}
			}
		}
	}
</script>

<style lang="scss">
	.top-view {
		display: flex;
		font-size: 28rpx;
		color: #333;
		background-color: #FFFFFF;
		padding: 30rpx;
		justify-content: space-between;

		.top-view-item {
			display: flex;
			align-items: center;
		}

		.xiala {
			width: 26rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}
	}

	.list {
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.list-item {
			display: flex;
			flex-direction: row;
			align-items: center;

			color: #333333;
			font-size: 28rpx;
			padding: 35rpx 20rpx;

			:first-child {
				flex: 1;
			}

			.jiantou {
				width: 14rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}

		.item-border {
			border-bottom: 1rpx #F8F8F8 solid;
		}
	}

	.btn {
		position: fixed;
		width: 690rpx;
		height: 88rpx;
		bottom: 50rpx;
	}
</style>